import { Link, Routes, Route, useRoutes } from "react-router-dom"
// 使用Route组件 外层需要套上Routes
import Discover from "../../pages/discover"
import Playlist from "../../pages/discover/Playlist"
import Toplist from "../../pages/discover/Toplist"
import Friend from "../../pages/friend"
import Page404 from "../../pages/page404"
import routesConfig from "../../router/routes"
import { useNavigate } from "react-router-dom"
const Base = () => {

    //useRoutes可以根据路由配置 生成对应的Route结构
    let Element = useRoutes(routesConfig)
    //编程式
    let navigate = useNavigate()
    console.dir(navigate)
    let handleJump = () => {
        //第一种写法 直接传路径
        // navigate('/discover/playlist')
        //第二种写法 传入对象 如果要传递quey 那么应该传递search属性
        // navigate({ pathname: "/discover/playlist", search: "name=李雷" })
        //第三种写法:
        // navigate('/discover/playlist', { state: { name: '李雷' } })
        navigate('/discover/playlist?name=李雷')
    }
    return (
        <fieldset>
            <legend>Base基本路由</legend>
            <Link to="/discover">发现</Link>
            <br />
            <Link to="/friend">朋友</Link>
            <button onClick={handleJump}>一个朴实无华的按钮</button>
            {/* <Routes>
                <Route path="*" element={<Page404 />} />11
                <Route path="/discover" element={<Discover />} >
                    <Route path="/discover/toplist" element={<Toplist />} />
                    <Route path="/discover/playlist" element={<Playlist />} />
                </Route>
                <Route path="/friend/:id" element={<Friend />} />
            </Routes> */}
            {Element}
        </fieldset>
    )
}

export default Base